<template>
	<view :style="$theme.pageStyle">
		<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#fff" type="transparentFixed"
			backState="2000" title="资讯">
			<view class="preview" slot="center">资讯</view>
		</z-nav-bar>
		<view class='newsList'>
			<view class="w-full h-392 relative" v-if="isbanner.length > 0">
				<swiper indicator-dots="true" autoplay circular :interval="3000" :duration="500"
					indicator-color="rgba(255,255,255,0.1)" indicator-active-color="#fff" class="w-full h-392 relative">
					<block v-for="(item,index) in isbanner" :key="index">
						<swiper-item>
							<navigator :url="item.url">
								<image :src="item.img" class="w-full h-392" mode="aspectFill" />
							</navigator>
						</swiper-item>
					</block>
				</swiper>
			</view>

			<view class="bg--w111-f5f5f5 relative rd-t-32rpx pt-12 content">
				<view class="nab-box w-full flex-between-center">
					<scroll-view scroll-x="true" scroll-with-animation :scroll-left="scrollLeft"
						class="white-nowrap vertical-middle w-662 pl-32" show-scrollbar="false">
						<view class="inline-block fs-30 h-88 lh-88rpx mr-40 " v-for="(item, index) in navList"
							:key="index" :class="active == index ? 'active' : 'text--w111-999'"
							@tap="tabSelect(item.id , index)">{{item.name}}</view>
					</scroll-view>
					<view class="h-88 w-88 flex-center" @tap="checkGrid">
						<uni-icons type="list" size="18"></uni-icons>
					</view>
				</view>
				<view class="mt-24 grid-column-2 grid-gap-18rpx px-24" v-show="grid">
					<view v-for="(item,index) in articleList" :key="index" @tap="getDetail(item.id)">
						<u--image :showLoading="true" radius="8" mode="widthFix" :src="item.image" width="100%"
							height="216rpx"></u--image>
						<view class="bg--w111-fff rd-b-16rpx p-20">
							<view class="w-full fs-28 h-80 lh-40rpx line2">{{item.title}}</view>
							<view class="flex-between-center mt-12 fs-24 text--w111-999">
								<text>{{ formatDate(item.create_time) }}</text>
								<view class="flex-y-center">
									<uni-icons type="eye" size="18"></uni-icons>
									<text class="pl-8">{{item.click}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt-24 px-24" v-show="!grid">
					<view class="flex justify-between mb-40" v-for="(item,index) in articleList" :key="index"
						@tap="getDetail(item.id)">
						<u--image :showLoading="true" radius="8" mode="widthFix" :src="item.image" width="240rpx"
							height="152rpx"></u--image>
						<view class="flex-1 pl-24 h-152 flex-col justify-between">
							<view class="w-full line2 fs-30 lh-42rpx h-84">{{item.title}}</view>
							<view class="flex-between-center mt-12 fs-24 text--w111-999">
								<text>{{ formatDate(item.create_time) }}</text>
								<view class="flex-y-center">
									<uni-icons type="eye" size="18"></uni-icons>
									<text class="pl-8">{{item.click}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class='px-20' v-if="!articleList.length">
					<emptyPage title="暂无资讯信息～"
						src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/001720545900NKzkic.gif">
					</emptyPage>
				</view>
			</view>
		</view>
		<view class="footer_zhanwei"></view>
		<tabbar />
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue';
	import $H from '@/common/js/request.js';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				isbanner: [],
				articleList: [],
				navList: [],
				active: 0,
				page: 1,
				limit: 8,
				status: false,
				scrollLeft: 0,
				scrollTop: 0,
				grid: true,
				CateId: 0,
			};
		},
		onLoad() {
			// this.getArticleHot();
			this.getArticleBanner();
			this.getArticleCate();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			checkGrid() {
				this.grid = !this.grid;
			},
			async getArticleBanner() {
				try {
					const res = await $H.post('article/banner', {}, {
						token: false
					});
					this.isbanner = res.data.banner
				} catch (error) {

				} finally {

				}
			},
			async getArticleCate() {
				try {
					const res = await $H.post('article/cate', {}, {
						token: false
					});
					this.navList = res.data
					this.CateId = res.data[0].id
					this.timeer()
				} catch (error) {

				} finally {

				}
			},
			timeer() {
				this.articleList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.getArticle();
			},
			getArticle(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.get('article/lists', {
						'page': page,
						'limit': this.limit,
						'cid': this.CateId,
					}, {
						token: false
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.lists;
							for (let i = 0; i < list.length; i++) {
								this.articleList.push(list[i]);
							}
							this.pages = res.data.page_no;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							this.out = 1;
							if (this.page == this.pages || res.data.count == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			tabSelect(id, index) {
				this.active = index;
				this.CateId = id;
				this.scrollLeft = index * 60;
				this.timeer();
			},
			getDetail(id){
				uni.navigateTo({
					url:'/pages/article/news_details?id=' + id
				})
			}
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss">
	.h-392 {
		height: 392rpx;
	}

	.content {
		left: 0;
		top: -32rpx;
	}

	.active {
		color: #333;
		font-size: 32rpx;
		font-weight: 500;
		position: relative;

		&::after {
			position: absolute;
			content: '';
			width: 36rpx;
			height: 10rpx;
			background-image: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/111720545671XT6Woe.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			left: 50%;
			bottom: 10rpx;
			margin-left: -18rpx;
		}
	}

	.line2 {
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden
	}
</style>